<template>
  <div id="site">
      <div class="Top">
      <!-- <a-input-search placeholder="搜索" style="width: 200px" @search="onSearch" /> -->
      <div></div>
      <a-button @click="visible = true"> <a-icon type="upload" /> 添加网址 </a-button>
    </div>
    <a-modal
      title="视频上传"
      :visible="visible"
      @ok="handleSubmit"
      @cancel="visible = false"
    >
      <template slot="footer">
        <a-button key="back" @click="visible = false"> 取消 </a-button>
        <a-button key="submit" type="primary" @click="handleSubmit"> 添加网址 </a-button>
      </template>
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item label="类别">
          <a-input
            v-decorator="[
              'category',
              { rules: [{ required: true, message: '请输入类别' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="应用">
          <a-input
            v-decorator="[
              'otcName',
              { rules: [{ required: true, message: '请输入应用' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="描述">
          <a-input
            v-decorator="[
              'otcDescribe',
              { rules: [{ required: true, message: '请输入描述' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="应用链接">
          <a-input
            v-decorator="[
              'path',
              { rules: [{ required: true, message: '请输入链接' }] },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <div class="nav-go">
      <div>
        <div v-for="(item, index) in cateArr" :key="index">
          <div
            @click="scrollLocal(index)"
            class="nav-go-title"
            :style="{
              'background-color':
                index === currentChooseIndex
                  ? '#74c869'
                  : 'rgba(255, 255, 255, 0.6)',
            }"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="nav-box" ref="navBox" @scroll="trueCurrentLocal">
      <div v-for="(item, index) in navData" :key="index">
        <div class="nav-body">
          <nav-card>
            <template #header>
              <div class="headerTip" @click="changeBodyHeight(index)">
                <!-- <i class="iconfont iconchevronsupshuangshangjiantou"></i>s -->
                <pop-tip style="margin:0 5px 0 10px;"><div style="font-size:12px">{{item.categoryDesc}}</div></pop-tip>
                <span style="line-height: 40px;">{{ item.category }}</span>
              </div>
            </template>
            <template #body>
              <div class="nav-body-item"  :class="{changeHeight:currentHeightIndex===index}">
                <div v-for="(itemData, index) in item.navigation" :key="index">
                  <act-item :ackData="itemData"></act-item>
                </div>
              </div>
            </template>
          </nav-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navCard from "../../components/navCard.vue";
import actItem from "./ackItem.vue";
import popTip from "../../components/tipPop.vue";
export default {
  components: {
    navCard,
    actItem,
    popTip,
  },
  created() {},
  data() {
    return {
      cateArr: [],
      navData: [],
      AllData: [],
      currentChooseIndex: 0,
      scrollDom: [],
      currentHeightIndex: null,
      form: this.$form.createForm(this, { name: "coordinated" }),
      visible:false,
    }
  },
  mounted() {
    this.searchNavigation();
  },
  methods: {
      handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.upload(values);
    this.searchNavigation();
          this.visible = false;
        }
      });
    },
      upload(values){
          console.log(values);
          this.$axios
          .post("/navigation/addTest", {
              ...values,
              status:this.$store.getters.user.status
          })
          .then((res) => {
            console.log(res);
            if (res.data.error === -1) {
              this.$message.success( "添加成功");
            } else {
              this.$message.error("添加成功");
            }
          });
      },
    changeBodyHeight(index){
      console.log(index)
      if(this.currentHeightIndex === null){
        this.currentHeightIndex = index
      }else if(this.currentHeightIndex === index){
        this.currentHeightIndex = null
      }else{
        this.currentHeightIndex = index

      }
    },
    scrollLocal(index) {
      if (this.scrollDom.length === 0) {
        let cardBody = document.querySelectorAll(".nav-body");
        this.scrollDom = Array.from(cardBody).map((item) => {
          return {
            dom: item,
            local: item.offsetTop,
          };
        });
      } else {
        this.$refs.navBox.scrollTop = this.scrollDom[index].local;
      }
    },
    trueCurrentLocal() {
      if (this.scrollDom.length === 0) {
        let cardBody = document.querySelectorAll(".nav-body");
        this.scrollDom = Array.from(cardBody).map((item) => {
          return {
            dom: item,
            local: item.offsetTop,
          };
        });
      } else {
        this.scrollDom.forEach((item, index) => {
          if (
            this.$refs.navBox.scrollTop >= item.local &&
            this.$refs.navBox.scrollTop <= item.local + item.dom.clientHeight
          ) {
            this.currentChooseIndex = index;
          }
        });
      }
    },
    searchNavigation() {
      this.$axios.get("/navigation/search").then((res) => {
        this.cateArr = Array.from(
          new Set(res.data.data.map((item) => item.category))
        );
        this.navData = this.cateArr.map((item) => {
          return {
            category: item,
            categoryDesc: "",
            navigation: [],
          };
        });
        console.log(this.navData);
        this.navData.forEach((navItem) => {
          res.data.data.forEach((item) => {
            if (item.category === navItem.category) {
              navItem.navigation.push(item);
              navItem.categoryDesc = item.categoryDesc;
            }
          });
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
#site{
    position: relative;
    width: 100%;
    height: 100%;
}
 .Top {
    box-sizing: border-box;
    padding: 0 60px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
.changeHeight{
  max-height:0px;
  overflow: hidden;
}
.nav-go {
  border-radius: 8px;
  width: 12%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3%;
  height: 500px;
  background-color: #cccccc99;
  text-align: center;
  padding: 5px;
  .nav-go-title {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    margin: 10px 0;
    font-size: 14px;
  }
}
.nav-box {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 30px 0;
  width: calc(100% - 500px);
  min-width: 620px;
  height: calc(100% - 50px);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  overflow-y: auto;
  .nav-body {
    padding: 30px 20px;
    .headerTip {
      text-align: center;
      color: #333;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav-body-item {
      display: flex;
      flex-wrap: wrap;
      transition: all 0.3s;
    }
  }
}
</style>